Adwaita: special case button in selected list rows
authorLapo Calamandrei <calamandrei@gmail.com>
Tue, 2 Sep 2014 19:25:53 +0000 (21:25 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Tue, 2 Sep 2014 20:54:40 +0000 (22:54 +0200)
Buttons on blue bg needs to have no shadow and, for the light
variant, darker borders.

gtk/resources/theme/Adwaita/_common.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index 4b3561dc0252caf25c6704771c0fe5db9859e55d..2f95c82be24f2e0215fc5f1764063539be6c9ae0 100644 (file)
@@ -2230,12 +2230,49 @@ GtkScrolledWindow {
 }
 
 .list-row:selected {
-  //FIXME %selected_items needs to be a mixin
   color: $selected_fg_color;
   background-color: $selected_bg_color;
   &:backdrop {
     color: $backdrop_base_color;
   }
+  .button {
+    @include button(normal, $noedge:true);
+    @if $variant == 'light' { border-color: $selected_borders_color; }
+    &:hover, &.flat:hover {
+      @include button(hover, $noedge:true);
+      @if $variant == 'light' { border-color: $selected_borders_color; }
+    }
+    &:active, &.flat:active,
+    &:checked, &.flat:checked {
+      @include button(active, $noedge:true);
+      @if $variant == 'light' { border-color: $selected_borders_color; }
+    }
+    &:backdrop {
+      @include button(backdrop, $noedge:true);
+      @if $variant == 'light' { border-color: $selected_borders_color; }
+      &:active, &:checked {
+        @include button(backdrop-active, $noedge:true);
+        @if $variant == 'light' { border-color: $selected_borders_color; }
+      }
+      &:insensitive {
+        @include button(backdrop-insensitive, $noedge:true);
+        @if $variant == 'light' { border-color: $selected_borders_color; }
+      }
+      &:insensitive:active {
+        @include button(backdrop-insensitive-active, $noedge:true);
+        @if $variant == 'light' { border-color: $selected_borders_color; }
+      }
+    }
+    &:insensitive {
+      @include button(insensitive, $noedge:true);
+      @if $variant == 'light' { border-color: $selected_borders_color; }
+    }
+    &.flat, &.flat:backdrop, &.flat:backdrop:insensitive {
+      @extend %undecorated_button;
+    }
+    //FIXME: make placeholder with buttons w/o edge to be extended around
+    // istead of repeating everytime this stuff.
+  }
 }
 
 /*.list-row.button:selected,
index ac2a86c4c97c5c28bd219fb356faae4fe2ed231a..ed0d71c71430ae13192aeffdb344b4c0958b4b5a 100644 (file)
@@ -902,7 +902,15 @@ GtkCalendar.header .button.titlebutton, .button.flat:backdrop, .button.flat:back
 .titlebar .button.titlebutton:backdrop:insensitive,
 GtkCalendar.header .button.titlebutton:backdrop:insensitive, .menuitem.button.flat, .menuitem.button.flat:backdrop, .header-bar .menuitem.button.titlebutton:backdrop,
 .titlebar .menuitem.button.titlebutton:backdrop,
-GtkCalendar.header .menuitem.button.titlebutton:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, .app-notification.frame .button.flat, .app-notification.frame .header-bar .button.titlebutton, .header-bar .app-notification.frame .button.titlebutton,
+GtkCalendar.header .menuitem.button.titlebutton:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, .list-row:selected .button.flat, .list-row:selected .header-bar .button.titlebutton, .header-bar .list-row:selected .button.titlebutton,
+.list-row:selected .titlebar .button.titlebutton,
+.titlebar .list-row:selected .button.titlebutton,
+.list-row:selected GtkCalendar.header .button.titlebutton,
+GtkCalendar.header .list-row:selected .button.titlebutton, .list-row:selected .button.flat:backdrop, .list-row:selected .button.flat:backdrop:insensitive, .list-row:selected .header-bar .button.titlebutton:backdrop:insensitive, .header-bar .list-row:selected .button.titlebutton:backdrop:insensitive,
+.list-row:selected .titlebar .button.titlebutton:backdrop:insensitive,
+.titlebar .list-row:selected .button.titlebutton:backdrop:insensitive,
+.list-row:selected GtkCalendar.header .button.titlebutton:backdrop:insensitive,
+GtkCalendar.header .list-row:selected .button.titlebutton:backdrop:insensitive, .app-notification.frame .button.flat, .app-notification.frame .header-bar .button.titlebutton, .header-bar .app-notification.frame .button.titlebutton,
 .app-notification.frame .titlebar .button.titlebutton,
 .titlebar .app-notification.frame .button.titlebutton,
 .app-notification.frame GtkCalendar.header .button.titlebutton,
@@ -2968,6 +2976,76 @@ GtkScrolledWindow GtkViewport.frame {
   background-color: #215d9c; }
   .list-row:selected:backdrop {
     color: #2c2c2c; }
+  .list-row:selected .button {
+    color: #eeeeec;
+    background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
+    border-color: #1c1f1f;
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+    icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+    .list-row:selected .button:hover, .list-row:selected .button.flat:hover, .list-row:selected .header-bar .button.titlebutton:hover, .header-bar .list-row:selected .button.titlebutton:hover,
+    .list-row:selected .titlebar .button.titlebutton:hover,
+    .titlebar .list-row:selected .button.titlebutton:hover,
+    .list-row:selected GtkCalendar.header .button.titlebutton:hover,
+    GtkCalendar.header .list-row:selected .button.titlebutton:hover {
+      color: #eeeeec;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+    .list-row:selected .button:active, .list-row:selected .button.flat:active, .list-row:selected .header-bar .button.titlebutton:active, .header-bar .list-row:selected .button.titlebutton:active,
+    .list-row:selected .titlebar .button.titlebutton:active,
+    .titlebar .list-row:selected .button.titlebutton:active,
+    .list-row:selected GtkCalendar.header .button.titlebutton:active,
+    GtkCalendar.header .list-row:selected .button.titlebutton:active, .list-row:selected .button:checked, .list-row:selected .button.flat:checked, .list-row:selected .header-bar .button.titlebutton:checked, .header-bar .list-row:selected .button.titlebutton:checked,
+    .list-row:selected .titlebar .button.titlebutton:checked,
+    .titlebar .list-row:selected .button.titlebutton:checked,
+    .list-row:selected GtkCalendar.header .button.titlebutton:checked,
+    GtkCalendar.header .list-row:selected .button.titlebutton:checked {
+      color: #eeeeec;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #232727, #2d3232);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+      box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6); }
+    .list-row:selected .button:backdrop {
+      color: #c9cbc9;
+      border-color: #1e2222;
+      background-image: linear-gradient(to bottom, #393f3f);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+      .list-row:selected .button:backdrop:active, .list-row:selected .button:backdrop:checked {
+        color: #c9cbc9;
+        border-color: #1e2222;
+        background-image: linear-gradient(to bottom, #2f3434);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+      .list-row:selected .button:backdrop:insensitive {
+        color: #5d6767;
+        border-color: #1e2222;
+        background-image: linear-gradient(to bottom, #323636);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+        .list-row:selected .button:backdrop:insensitive > GtkLabel {
+          color: inherit; }
+      .list-row:selected .button:backdrop:insensitive:active {
+        color: #5d6767;
+        border-color: #1e2222;
+        background-image: linear-gradient(to bottom, #303434);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+        .list-row:selected .button:backdrop:insensitive:active > GtkLabel {
+          color: inherit; }
+    .list-row:selected .button:insensitive {
+      color: #939695;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #323636);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .list-row:selected .button:insensitive > GtkLabel {
+        color: inherit; }
 
 /*.list-row.button:selected,
 .list-row:selected {
index e276198156a9d15cd8556370765fbbb4a6d1e4ee..2c249b09ffe1f9ee7f9dfe391c8cea50230fe638 100644 (file)
@@ -894,7 +894,15 @@ GtkCalendar.header .button.titlebutton, .button.flat:backdrop, .button.flat:back
 .titlebar .button.titlebutton:backdrop:insensitive,
 GtkCalendar.header .button.titlebutton:backdrop:insensitive, .menuitem.button.flat, .menuitem.button.flat:backdrop, .header-bar .menuitem.button.titlebutton:backdrop,
 .titlebar .menuitem.button.titlebutton:backdrop,
-GtkCalendar.header .menuitem.button.titlebutton:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, .app-notification.frame .button.flat, .app-notification.frame .header-bar .button.titlebutton, .header-bar .app-notification.frame .button.titlebutton,
+GtkCalendar.header .menuitem.button.titlebutton:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, .list-row:selected .button.flat, .list-row:selected .header-bar .button.titlebutton, .header-bar .list-row:selected .button.titlebutton,
+.list-row:selected .titlebar .button.titlebutton,
+.titlebar .list-row:selected .button.titlebutton,
+.list-row:selected GtkCalendar.header .button.titlebutton,
+GtkCalendar.header .list-row:selected .button.titlebutton, .list-row:selected .button.flat:backdrop, .list-row:selected .button.flat:backdrop:insensitive, .list-row:selected .header-bar .button.titlebutton:backdrop:insensitive, .header-bar .list-row:selected .button.titlebutton:backdrop:insensitive,
+.list-row:selected .titlebar .button.titlebutton:backdrop:insensitive,
+.titlebar .list-row:selected .button.titlebutton:backdrop:insensitive,
+.list-row:selected GtkCalendar.header .button.titlebutton:backdrop:insensitive,
+GtkCalendar.header .list-row:selected .button.titlebutton:backdrop:insensitive, .app-notification.frame .button.flat, .app-notification.frame .header-bar .button.titlebutton, .header-bar .app-notification.frame .button.titlebutton,
 .app-notification.frame .titlebar .button.titlebutton,
 .titlebar .app-notification.frame .button.titlebutton,
 .app-notification.frame GtkCalendar.header .button.titlebutton,
@@ -3108,6 +3116,84 @@ GtkScrolledWindow GtkViewport.frame {
   background-color: #4a90d9; }
   .list-row:selected:backdrop {
     color: #fcfcfc; }
+  .list-row:selected .button {
+    color: #2e3436;
+    background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
+    border-color: #a1a1a1;
+    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    box-shadow: inset 0 1px white;
+    border-color: #184472; }
+    .list-row:selected .button:hover, .list-row:selected .button.flat:hover, .list-row:selected .header-bar .button.titlebutton:hover, .header-bar .list-row:selected .button.titlebutton:hover,
+    .list-row:selected .titlebar .button.titlebutton:hover,
+    .titlebar .list-row:selected .button.titlebutton:hover,
+    .list-row:selected GtkCalendar.header .button.titlebutton:hover,
+    GtkCalendar.header .list-row:selected .button.titlebutton:hover {
+      color: #2e3436;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+      text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      box-shadow: inset 0 1px white;
+      border-color: #184472; }
+    .list-row:selected .button:active, .list-row:selected .button.flat:active, .list-row:selected .header-bar .button.titlebutton:active, .header-bar .list-row:selected .button.titlebutton:active,
+    .list-row:selected .titlebar .button.titlebutton:active,
+    .titlebar .list-row:selected .button.titlebutton:active,
+    .list-row:selected GtkCalendar.header .button.titlebutton:active,
+    GtkCalendar.header .list-row:selected .button.titlebutton:active, .list-row:selected .button:checked, .list-row:selected .button.flat:checked, .list-row:selected .header-bar .button.titlebutton:checked, .header-bar .list-row:selected .button.titlebutton:checked,
+    .list-row:selected .titlebar .button.titlebutton:checked,
+    .titlebar .list-row:selected .button.titlebutton:checked,
+    .list-row:selected GtkCalendar.header .button.titlebutton:checked,
+    GtkCalendar.header .list-row:selected .button.titlebutton:checked {
+      color: #2e3436;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0);
+      text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6);
+      border-color: #184472; }
+    .list-row:selected .button:backdrop {
+      color: #54595a;
+      border-color: #a8a8a8;
+      background-image: linear-gradient(to bottom, #ededed);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+      border-color: #184472; }
+      .list-row:selected .button:backdrop:active, .list-row:selected .button:backdrop:checked {
+        color: #54595a;
+        border-color: #a8a8a8;
+        background-image: linear-gradient(to bottom, #d4d4d4);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+        border-color: #184472; }
+      .list-row:selected .button:backdrop:insensitive {
+        color: #c7c7c7;
+        border-color: #a8a8a8;
+        background-image: linear-gradient(to bottom, #f4f4f4);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+        border-color: #184472; }
+        .list-row:selected .button:backdrop:insensitive > GtkLabel {
+          color: inherit; }
+      .list-row:selected .button:backdrop:insensitive:active {
+        color: #c7c7c7;
+        border-color: #a8a8a8;
+        background-image: linear-gradient(to bottom, #ededed);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+        border-color: #184472; }
+        .list-row:selected .button:backdrop:insensitive:active > GtkLabel {
+          color: inherit; }
+    .list-row:selected .button:insensitive {
+      color: #8d9091;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, #f4f4f4);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+      border-color: #184472; }
+      .list-row:selected .button:insensitive > GtkLabel {
+        color: inherit; }
 
 /*.list-row.button:selected,
 .list-row:selected {